<template>
	<!-- 横屏 -->
	<video src="https://bucket-312.oss-cn-chengdu.aliyuncs.com/video/dtbj.mp4" 
		autoplay loop 
		class="bg-video" 
		object-fit="cover" 
		enable-progress-gesture="false" 
		:show-play-btn="false" 
		:controls="false"></video>	
	<view class="content">
		<!-- 头像 -->
		<view class="header">
			<view class="lv">{{userInfo.level}}</view>
		</view>
		
		<!-- 昵称 -->
		<view class="nickname">
			{{userInfo.nickname}}
		</view>
		
		<!-- 开始游戏 -->
		<button class="start" @click="startGame" v-if="!matchingShow">
			开始逃离
		</button>
		<button class="start" @click="stopGame" v-else>
			行动取消
		</button>
		
		<view class="matchings" v-show="matchingShow">
			{{matching}} 逃离五角大楼
		</view>
		
		<!-- 右上角区域 -->
		<GameCurrency class="right-box"></GameCurrency>
		
		<!-- 世界聊天框组件 -->
		<!-- <WorldChatBox class="world-msg"></WorldChatBox> -->
		
		<!-- 工具栏 -->
		<ToolsBoxVue class="my-box"></ToolsBoxVue>
	</view>
</template>

<script>
	import audioManager from '@/utils/audioManager.js';
	import { getUserInfo } from '@/api/index';
	import WorldChatBox from '@/component/WorldChatBox.vue';
	import ToolsBoxVue from '@/component/ToolsBox.vue';
	/* 右上角区域 */
	import GameCurrency from "@/component/GameCurrency.vue";
	
	export default {
		data() {
			return {
				matching:"00:00",
				matchingShow:false,
				gameInterval:null,
				userInfo:{}
			}
		},
		components:{
			WorldChatBox,
			ToolsBoxVue,
			GameCurrency
		},
		onShow(){
			this.getUserInfoMethods();
		},
		mounted() {
			// 调用
			this.getUserInfoMethods();
		},
		methods: {
			// 获取个人信息
			 getUserInfoMethods(){
				getUserInfo().then((data)=>{
					console.log("个人信息",data);
					this.userInfo = data.data;
				}) 
			 },
			startGame(){
				this.matchingShow = true;
				this.startTime();
				audioManager.playAudio("dt_btn",false);
				setTimeout(()=>{
					//播放bgm
					audioManager.playAudio("dt_bgm",true);
				},500);
			},
			stopGame(){
				this.matchingShow = false;
				audioManager.destroyAll();
				// clearImmediate(this.gameInterval);
				clearInterval(this.gameInterval);
				
			},
			startTime(){
				var minutes = 0;
				var seconds = 0;
				this.gameInterval = setInterval(()=>{
					seconds ++;
					if(seconds == 60){
						seconds = 0;
						minutes ++;
					}
					let a,b;
					if(minutes<10){
						a = "0"+minutes;
					}else{
						a = minutes;
					}
					if(seconds<10){
						b = "0"+seconds;
					}else{
						b = seconds;
					}
					this.matching = a+":"+b;
				},1000);
			}
		}
	}
</script>

<style scoped>
	.show-info{
		width: 100%;
		height: 100vh;
		background-color: black;
		color: #fff;
		text-align: center;
		line-height: 100vh;
		font-size: 25px;
	}
	.bg-video{
		width: 100%;
		height: 100vh;
	}
	.content{
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 99999;
		left: 0;
		top: 0;
		color: #fff;
	}
	.header{
		position: relative;
		width: 60px;
		height: 60px;
		left: 10px;
		top: 10px;
		border: 1px solid #ccc;
	}
	.lv{
		width: calc(100% - 2px);
		height: 10px;
		position: absolute;
		bottom: 5px;
		right: 2px;
		text-align: right;
		font-size: 12px;
	}
	.start{
		position: absolute;
		width: 180px;
		height: 60px;
		right: 10px;
		bottom: 10px;
		background-color: #07bc71;
		font-weight: bold;
		line-height: 60px;
		color: #013821;
		text-align: center;
		font-size: 20px;
		border:1px solid #ccc;
	}
	.matchings{
		width: 200px;
		height: 25px;
		background-color: rgba(1, 56, 33, 0.6);
		position: absolute;
		top: 10px;
		left: calc((100% - 200px)/2);
		text-align: center;
		line-height: 25px;
		font-size: 14px;
		border-radius: 7px;
	}
	.nickname{
		width: 130px;
		height: 20px;
		position: absolute;
		top: 10px;
		left: 75px;
		color: #fff;
		font-size: 12px;
	}
	
	.world-msg{
		position: fixed;
		bottom: 75px;
		left: 5px
	}
	.my-box{
		position: fixed;
		bottom: 20px;
	}
	.right-box{
		position: absolute;
		top: 5px;
		right: 10px;
		z-index: 1px;
	}
</style>
